/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from "react";
import type { TableProps } from "antd";
import { Table } from "antd";
import type {
  ColumnsType,
  FilterValue,
  SorterResult,
} from "antd/es/table/interface";
import { hyd_yuangong } from "../../../api/HuangYuDong/yuangong";
import "../../../styles/HuangYuDong/YuanGong/YGHuaMingCe.scss"
import { useNavigate } from "react-router-dom";
interface DataType {
  key: string;
  name: string;
  gonghao: number;
  bumen: string;
  shoujihao: string;
  zhiwei: string;
  leixing: string;
  zhengjian: string;
  time: number;
}


interface Props {}

function YGHuaMingCe(props: Props) {
  const [filteredInfo, setFilteredInfo] = useState<
    Record<string, FilterValue | null>
  >({});
  const [sortedInfo, setSortedInfo] = useState<SorterResult<DataType>>({});

  const handleChange: TableProps<DataType>["onChange"] = (
    pagination,
    filters,
    sorter
  ) => {
    console.log("Various parameters", pagination, filters, sorter);
    setFilteredInfo(filters);
    setSortedInfo(sorter as SorterResult<DataType>);
  };

  const columns: ColumnsType<DataType> = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "工号",
      dataIndex: "gonghao",
      key: "gonghao",
      sorter: (a, b) => a.gonghao - b.gonghao,
      sortOrder: sortedInfo.columnKey === "gonghao" ? sortedInfo.order : null,
      ellipsis: true,
    },
    {
      title: "部门",
      dataIndex: "bumen",
      key: "bumen",
      filters: [
        { text: "行销部", value: "行销部" },
        { text: "设计部", value: "设计部" },
        { text: "产品部", value: "产品部" },
      ],
      filteredValue: filteredInfo.bumen || null,
      onFilter: (value: any , record) => record.bumen.includes(value),
    },
    {
      title: "手机号",
      dataIndex: "shoujihao",
      key: "shoujihao",
    },
    {
      title: "职位",
      dataIndex: "zhiwei",
      key: "zhiwei",
      filters: [
        { text: "产品经理", value: "产品经理" },
        { text: "设计师", value: "设计师" },
        { text: "设计主管", value: "设计主管" },
        { text: "前台", value: "前台" },
      ],
      filteredValue: filteredInfo.zhiwei || null,
      onFilter: (value: any, record) => record.zhiwei.includes(value),
    },
    {
      title: "类型",
      dataIndex: "leixing",
      key: "leixing",
    },
    {
      title: "证件类型",
      dataIndex: "zhengjianleixing",
      key: "zhengjianleixing",
    },
    {
      title: "身份证号",
      dataIndex: "zhengjian",
      key: "zhengjian",
    },
    {
      title: "入职日期",
      dataIndex: "time",
      key: "time",
    },
  ];
  let [list, useList] = useState([]);
  let liebiao = () => {
    hyd_yuangong().then((ok) => {
      console.log(ok);
      let arr = ok.data.map((v: any, i: any) => {
        return {
          key: i,
          id: v.id,
          name: v.name,
          gonghao: v.gonghao,
          bumen: v.bumen,
          shoujihao: v.shoujihao,
          zhiwei: v.zhiwei,
          leixing: v.leixing,
          zhengjianleixing: v.zhengjianleixing,
          zhengjian: v.zhengjian,
          time: v.time,
        };
      });
      useList(arr);
    });
  };
  useEffect(() => {
    liebiao();
  }, []);
    //   跳转
    let navigate = useNavigate();
    // 新增
    let add = () => {
      navigate("/index/yuangong/ygadd");
    };
  return (
    <div className="huamingce">
      <div className="center">
        <h2>花名册      
          <button
            className="add"
            onClick={() => {
              add();
            }}
          >
            +新增员工
          </button></h2>
        <Table columns={columns} dataSource={list} onChange={handleChange}      pagination={{ pageSize: 7 }} />
      </div>
    </div>
  );
}

export default YGHuaMingCe;
